import React, { useEffect , useState } from "react";
import './index.scss'
import { useParams } from "react-router-dom";
import { getAriticle } from "../../api";
import CommentCard from "../../components/CommentCard";
interface articleType {
  id: string,
  url: string,
  title: string,
  text: string,
  tag: string[],
  step: string[],
  user: {
    username: string,
    url: string
  },
  time: string,
  views: number,
  like: number,
  reply: replyType[]
}
interface replyType {
  name: string,
  url: string,
  time: string,
  content: string
}



const Article: React.FC = () => {
  const parms = useParams()
  const [articleContent, setArticleContent] = useState<articleType>({} as articleType)
  useEffect(()=> {
    const getArticleContent = async()=> {
      const res = await getAriticle(parms.id)
      const article = res as unknown as articleType[]
      console.log(article[0]);
      
      setArticleContent(article[0])
    }
    getArticleContent()
  },[parms.id])
  return (
    <div className="article">
      <div className="banner">
        <h3>{articleContent.title}</h3>
        <div className="userInfo">
          <div style={{height:'50px' , width:'300px' , display:'flex' , alignItems:'center'}}>
            <img src={articleContent.user?.url} alt="" />
            <span style={{minWidth:'50px' , height:'50px' , lineHeight:'50px' , textAlign:'left'}}>{articleContent.user?.username}</span>
            <button style={{width:'60px' , height:'25px' , backgroundColor:'#fff' , border:'3px solid #058df2' , color:'#56abf7' , marginLeft:'20px'}}>关注</button>
          </div>
          <div className="textInfo">
            <span>{articleContent.views}浏览</span>
            <span>{articleContent.time}</span>
          </div>
        </div>
        <article>
          <h2>1.菜品介绍</h2>
          <img src={articleContent.url} alt="" style={{width:'200px' , height:'150px' }}/>
          <p className="text" style={{marginTop:'-40px'}}>{articleContent.text}</p>
          <h2>2.菜品标签</h2>
          <div className="tag">
            {articleContent.tag?.map((item,index)=> {
              return <span key={index}>{item}</span>
            })}
          </div>
          <h2>3.菜品做法</h2>
          <ul>
            {
              articleContent.step?.map((item,index)=> {
                return <li key={index}>{index+1}.{item}</li>
              })
            }
          </ul>
        </article>
        <footer>
          <div className="comment">
            <img src={articleContent.user?.url} alt="" />
            <input type="text" placeholder="请输入评论内容" />
            <button style={{backgroundColor:'#1f93ee'}}>发布</button>
            <button>取消</button>
          </div>
          <div className="commentView">
            <div style={{width:'5px' , height:'100%' , backgroundColor:'#058df2'}}></div>
            <h4>全部评论</h4>
          </div>
          <div style={{widows:'100%' , minHeight:'80px' , marginTop:'20px'}}>
            {articleContent.reply?.map((item,index)=> {
              return <CommentCard user = {item} key={index}/>
            })}
            
          </div>
        </footer>
      </div>
      
    </div>
    
  )
};

export default Article;
